<template>
  <div>
    <el-table :data="contractList">
      <el-table-column label="序号" type="index" align="center" width="60"/>
      <el-table-column label="合同名称" width="300" align="center" prop="contractName"/>
      <el-table-column label="合同编号" width="200" align="center" prop="contractCode"/>
      <el-table-column label="项目归属" width="200" align="center" prop="projectOwner"/>
      <el-table-column label="项目负责人" width="150" align="center" prop="projectLeader"/>
      <el-table-column label="合同金额(元)" width="180" align="center" prop="projectLeader">
        <template #default="scope">
          {{scope.row.totalAmount/10000}}
        </template>
      </el-table-column>
      <el-table-column label="合同履行期限" width="200" prop="projectLeader">
        <template #default="scope">
          <span>{{parseTime(scope.row.startDate, '{y}-{m}-{d}')}}至{{parseTime(scope.row.finishDate, '{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="look(scope.row.projectId)" >查看</el-button><br>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <!-- 合同查看   -->
    <el-dialog v-model="openView" width="900px" append-to-body :close-on-click-modal="false"  style=" border-radius: 20px;padding-left: 20px;" class="larger-input">
      <div style="display: flex; align-items: center;">
        <div class="blue-bar"></div>
        <div class="custom-title">合同基本信息：</div>
      </div>
      <el-row :gutter="10" style="display: flex;margin-left: 60px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;white-space: nowrap;">合同编号：</span>
          <el-input
              v-model="contractDetail.contractCode"
              disabled
              style="width: 70%;;"></el-input>
        </el-col>
        <el-col :span="12"  style="display: flex; align-items: center;">
          <span style="margin-right: 10px; white-space: nowrap;">合同名称：</span>
          <el-input
              v-model="contractDetail.contractName"
              disabled
              style="width: 69.8%;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 60px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>签订日期：</span>
          <el-input v-model="contractDetail.signingTime" placeholder="选择日期" disabled style="width: 70%; margin-left: 10px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>签订地址：</span>
          <el-input v-model="contractDetail.signingLocation" disabled style="width: 70%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>履约开始日期：</span>
          <el-input v-model="contractDetail.startDate" placeholder="选择开始日期" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center; margin-left: -15px;">
          <span >履约结束日期：</span>
          <el-input v-model="contractDetail.finishDate" placeholder="选择结束日期" disabled style="width: 67.3%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left:59px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right:5px;">合同金额：</span>
          <el-input v-model="contractDetail.realTotalAmount" disabled style="width: 70%; margin-left: 6px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 0px;">所属项目：</span>
          <el-input v-model="contractDetail.projectName" disabled style="width: 70%; margin-left: 11px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 20px;">剩余合同份数：</span>
          <el-input v-model="contractDetail.contractNumber" disabled style="width: 68%; margin-left: -11px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 15px;">项目归属：</span>
          <el-input v-model="contractDetail.projectOwner" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12">
          <span>是否需要专利：</span>
          <el-radio-group v-model="contractDetail.patent" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 15px;">专利要求：</span>
          <el-input v-model="contractDetail.patentRequirement" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>是否需要文章：</span>
          <el-radio-group v-model="contractDetail.article" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 15px;">文章要求：</span>
          <el-input v-model="contractDetail.articleRequirement" disabled style="width: 67.5%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 0px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>是否提交给科研办：</span>
          <el-radio-group v-model="contractDetail.scientificOffice" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 30px;">提交时间：</span>
          <el-input v-model="contractDetail.scientificOfficeDate" placeholder="选择时间" disabled style="width: 65.3%; margin-left: 10px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 15px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span>是否提交给院办：</span>
          <el-radio-group v-model="contractDetail.instituteOffice" style="padding-left: 20px">
            <el-radio :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 23px;">提交时间：</span>
          <el-date-picker
              v-model="contractDetail.instituteOfficeDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 67%; margin-left: 8px;height: 38px"
              disabled
          ></el-date-picker>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: -28px;">
        <el-col :span="12">
          <span>科技合同是否需要登记：</span>
          <el-radio-group v-model="contractDetail.record" style="padding-left: 20px">
            <el-radio :value="1" :label="1" size="large" :disabled="true">是</el-radio>
            <el-radio :value="0" :label="0" size="large" :disabled="true">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 30px;">
        <el-col :span="24">
          <span>合同主要内容：</span>
          <el-input
              v-model="contractDetail.contractContent"
              type="textarea"
              :rows="4"
              placeholder="合同内容介绍"
              :readonly="!contractDetail.contractContent"
              style="width: 98%; margin-top: 5px;font-size: 16px"
          >
            <template v-if="!contractDetail.contractContent" slot="prepend">合同内容介绍</template>
          </el-input>
        </el-col>
      </el-row>
      <br>
      <div style="display: flex; align-items: center;">
        <div class="blue-bar"></div>
        <div class="custom-title">签订各方信息：</div>
        <!--  <div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;"></div>
        <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">签订各方信息:</div>-->
      </div>
      <el-row :gutter="10" style="display: flex;margin-left: 80px;">
        <el-col :span="12">
          <span>甲方：</span>
          <el-input v-model="contractDetail.partA" placeholder="请输入甲方信息" disabled style="width: calc(93% - 70px); margin-left: 3px;"></el-input>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 35px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 8px;">法定代表人：</span>
          <el-input v-model="contractDetail.alegal" placeholder="请输入法定代表人" disabled style="width: 70%; margin-left: -6px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 20px;">电话：</span>
          <el-input v-model="contractDetail.aphone" placeholder="请输入电话" disabled style="width: 70%; margin-left: 5px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 80px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">地址：</span>
          <el-input v-model="contractDetail.alocation" placeholder="请输入地址" disabled style="width: 74%; margin-left: -7px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">邮箱：</span>
          <el-input v-model="contractDetail.aemail" placeholder="请输入邮箱" disabled style="width: 74%; margin-left: -6px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 80px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;white-space: nowrap">乙方：</span>
          <el-input v-model="contractDetail.partB" placeholder="请输入乙方信息" disabled style="width: 74%; margin-left: -7px;"></el-input>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left:35px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">法定代表人：</span>
          <el-input v-model="contractDetail.blegal" placeholder="请输入法定代表人" disabled style="width:70%; margin-left: -8px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 25px;">电话：</span>
          <el-input v-model="contractDetail.bphone" placeholder="请输入电话" disabled style="width:70%; margin-left: 4px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 60px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 20px;">地址：</span>
          <el-input v-model="contractDetail.blocation" placeholder="请输入地址" disabled style="width: 72%; margin-left: 2px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="text-indent: 14px;">邮箱：</span>
          <el-input v-model="contractDetail.bemail" placeholder="请输入邮箱" disabled style="width: 73%; margin-left:2px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <div style="display: flex; align-items: center;">
        <div class="blue-bar"></div>
        <div class="custom-title">收款账户信息：</div>
        <!-- <div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;"></div>
       <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">收款账户信息:</div>-->
      </div>
      <el-row :gutter="10" style="display: flex;margin-left: 20px;">
        <el-col :span="16" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">收款账户名称：</span>
          <el-input v-model="contractDetail.payeeAccount" placeholder="请输入收款账户名称" disabled style="width: 50%; margin-left: -5px;"></el-input>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <br>
      <el-row :gutter="10" style="display: flex;margin-left: 50px;">
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">开户银行：</span>
          <el-input v-model="contractDetail.openingBank" placeholder="请输入开户银行" disabled style="width: 70%; margin-left: -5px;"></el-input>
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">银行账号：</span>
          <el-input v-model="contractDetail.bankAccount" placeholder="请输入银行账号" disabled style="width: 70%; margin-left: -5px;"></el-input>
        </el-col>
      </el-row>
      <br>
      <div style="margin: 0px;margin-bottom: 20px">
        <div style="display: flex; align-items: center;">
          <div class="blue-bar"></div>
          <div class="custom-title">里程碑：</div>
          <!--<div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;padding-top: 10px"></div>
          <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">里程碑:</div>-->
        </div>
        <el-table :data="lcbList" style="margin-top: 10px">
          <el-table-column label="里程碑" prop="event" />
          <el-table-column label="里程碑时间" prop="date" style="padding-left: 50px;"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" style="padding-left: 50px;">
            <template #default="scope">
              <!--            <el-button link type="primary" icon="Edit" @click="handleUpdate2(scope.row)">修改</el-button>-->
              <!--            <el-button link type="primary" icon="Delete" @click="handleDelete2(scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="total2>0"
            :total="total2"
            v-model:page="queryParamslcb.pageNum"
            v-model:limit="queryParamslcb.pageSize"
            @pagination="getLCBList"
        />
      </div>
      <div style="margin: 0px;margin-bottom: 20px">
        <div style="display: flex; align-items: center;">
          <div class="blue-bar"></div>
          <div class="custom-title">合同支付计划：</div>
          <!-- <div style="width: 10px; height: 2.5em; background-color: cornflowerblue; margin-right: 5px;"></div>
         <div style="text-align: left; font-size: 17px; font-weight: bold;color:#5a5e66; margin-bottom: 10px; font-family: 'Microsoft YaHei', Arial, sans-serif;">合同支付计划:</div>  -->
        </div>
        <el-table :data="zfList" style="margin-top: 10px;">
          <el-table-column label="期数" type="index" width="55"/>
          <el-table-column label="计划支付日期" prop="paymentDate"/>
          <el-table-column label="计划支付金额" prop="paymentPrice">
            <template #default="scope">
              {{scope.row.paymentPrice/100}}
            </template>
          </el-table-column>
          <el-table-column label="支付比例">
            <template #default="scope">
              {{(scope.row.paymentPrice/contractDetail.totalAmount*10000).toFixed(2)}}%
            </template>
          </el-table-column>
          <el-table-column label="收款人" prop="payee"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <!--            <el-button link type="primary" icon="Edit" @click="handleUpdate3(scope.row)" >修改</el-button>-->
              <!--            <el-button link type="primary" icon="Delete" @click="handleDelete3(scope.row)" >删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <span v-if="limitAmount" style="color: red;font-size: 16px">警告：计划支付总额大于合同金额，请进行修改！</span>
        <pagination
            v-show="total3>0"
            :total="total3"
            v-model:page="queryParamszf.pageNum"
            v-model:limit="queryParamszf.pageSize"
            @pagination="getZFList"
        />
      </div>

      <div class="descriptions-with-bar">
        <div class="blue-bar"></div>
        <div class="custom-title">附件信息：</div>
        <el-descriptions style="margin: 0; padding: 0;padding-top: 15px;">
          <el-descriptions-item label="合同文件：" >
            <el-button type="primary" :disabled="contractDetail.contractDocuments == null" @click="download(contractDetail.contractDocuments)">下载</el-button>
<!--            <el-button type="success" :disabled="contractDetail.contractDocuments == null" @click="showFile(contractDetail.contractDocuments)">查看</el-button>-->
          </el-descriptions-item>
          <el-descriptions-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;补充合同文件：" >
            <el-button type="primary" :disabled="contractDetail.supplementaryDocuments == null" @click="download(contractDetail.supplementaryDocuments)">下载</el-button>
<!--            <el-button type="success" :disabled="contractDetail.supplementaryDocuments == null" @click="showFile(contractDetail.supplementaryDocuments)">查看</el-button>-->
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {parseTime} from "@/utils/ruoyi.js";
import {getContractList} from "@/api/home/home.js";
import {getContract} from "@/api/contract/contract.js";
import {listCollection} from "@/api/contract/payment.js";
import {listMilestone} from "@/api/contract/lcb.js";
import request from "@/utils/request.js";

const contractList=ref([]);
const total=ref(0);
const queryParams=ref({pageNum:1,pageSize:10,type:'HT'});

const setYearAndType=(year,type)=>{
  queryParams.value.year=year;
  queryParams.value.type=type;
}

function getList(){
  getContractList(queryParams.value).then(res=>{
    total.value=res.total;
    contractList.value=res.rows;
  })
}

const openView = ref(false);
const contractDetail=ref({});
let pid;
function look(id){
  pid=id;
  getZFList();
  getLCBList();
  getContract(id).then(res=>{
    contractDetail.value=res.data;
    contractDetail.value.realTotalAmount=contractDetail.value.totalAmount/10000;
    openView.value=true;
  })
}
const limitAmount=ref(false);
const queryParamszf=ref({pageNum: 1, pageSize: 4});
const zfList=ref([]);
const total3=ref(0);
function getZFList(){
  limitAmount.value=false;
  queryParamszf.value.projectId=pid;
  listCollection(queryParamszf.value).then(res=>{
    zfList.value=res.rows;
    if (contractDetail.value != null){
      let sum=0;
      for (var i of res.rows){
        sum+=i.paymentPrice;
      }
      if (contractDetail.value.totalAmount<sum){
        limitAmount.value=true;
      }
    }
    total3.value=res.total;
  })
}
const queryParamslcb=ref({pageNum: 1, pageSize: 4});
const lcbList=ref([]);
const total2=ref(0);
function getLCBList(){
  queryParamslcb.value.projectId=pid;
  listMilestone(queryParamslcb.value).then(res=>{
    lcbList.value=res.rows;
    total2.value=res.total;
  })
}
//合同下载
const baseurl=import.meta.env.VITE_APP_BASE_API;
function download(filename){
  request({
    url:'/common/download?fileName='+filename,
    method:'get',
    responseType:'blob'
  }).then(async res=>{
    const blob = new Blob([res], { type: 'application/'+filename.slice(filename.lastIndexOf('.')+1) });  // 此处文件类型为pdf
    saveAs(blob, filename.slice(filename.lastIndexOf('/')+1,filename.lastIndexOf('_'))+filename.slice(filename.lastIndexOf('.')));
  })
}
//文件在线阅览
const openShowFile=ref(false);
const file=ref(null);
const fileType=ref(null);

function showFile(f){
  // file.value='http://localhost:8080'+baseurl+'/common/download?fileName='+f;
  file.value=baseurl+'/common/download?fileName='+f;
  fileType.value=f.slice(f.lastIndexOf('.')+1);
  openShowFile.value=true;
}

defineExpose({setYearAndType,getList})
</script>
<style scoped lang="scss">

</style>